<div class="icons-social">
<ul id="social">
<li><a class="facebook" href="#" title="facebook"></a></li>
<li><a class="twitter" href="#" title="twitter"></a></li>
<li><a class="gplus" href="#" title="gplus"></a></li>
<li><a class="linkedin" href="#" title="linkedin"></a></li>
<li><a class="instagram" href="#" title="instagram"></a></li>
<li><a class="pinterest" href="#" title="pinterest"></a></li>
</ul></div>
<style>.icons-social li {
display: inline-block;
padding: 0;
}
.icons-social ul {
    display: inline-block;
}
.icons-social {
    text-align: center;
}
.icons-social #social a {
display: block;
    margin-right: 15px;
    color: #333;
    text-align: center;
    font-size: 20px;
}
.icons-social #social a:before {
display: inline-block;
font: normal normal normal 22px/1 FontAwesome;
font-size: inherit;
font-style: normal;
font-weight: 400;
line-height: 42px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icons-social .facebook:before {
content: "\f09a";
}
.icons-social .twitter:before {
content: "\f099";
}
.icons-social .gplus:before {
content: "\f0d5";
}
.icons-social .linkedin:before {
content: "\f0e1";
}
.icons-social .instagram:before {
content: "\f16d";
}
.icons-social .pinterest:before {
content: "\f0d2";
}
</style>